<template>
  <div class="schedulingManage">
    <div class="navBar">
      <span :class="navBarIndex == 0 ? 'nav_btn nav_btn_active' : 'nav_btn'" @click="changeNav(0)">今日排班</span>
      <span :class="navBarIndex == 1 ? 'nav_btn nav_btn_active' : 'nav_btn'" @click="changeNav(1)">年度排班</span>
    </div>
    <TimeAxis v-if="navBarIndex == 0" :time-points="['08:00', '12:00', '13:00', '14:00']" :names="[
      '李斯、王晓雷、张晓乐、严白涛、汪大海',
      '李斯、王晓雷、张晓乐、严白涛、汪大海',
      '李斯、王晓雷、张晓乐、严白涛、汪大海',
      '李斯、王晓雷、张晓乐、严白涛、汪大海'
    ]" />
    <annualScheduling v-else="navBarIndex == 1"></annualScheduling>
  </div>
</template>

<script setup lang="ts">
import TimeAxis from './components/TimeAxis.vue';
import annualScheduling from './components/annualScheduling.vue';

let navBarIndex = ref(0);

const changeNav = (index: number) => {
  if (navBarIndex.value != index) {
    navBarIndex.value = index;
  }
}

const slotsData = [
  { time: '08:00-12:00', name: '李斯、王晓雷、张晓乐、严白涛、汪大海' },
  { time: '12:00-13:00', name: '李斯、王晓雷、张晓乐、严白涛、汪大海' },
  { time: '13:00-18:00', name: '李斯、王晓雷、张晓乐、严白涛、汪大海' },
  { time: '18:00-24:00', name: '李斯、王晓雷、张晓乐、严白涛、汪大海' }
];
</script>

<style lang="scss" scoped>
.schedulingManage {
  z-index: 998;
  height: 100vh;
  position: relative;
  background: #08334e;

  .navBar {
    // position: absolute;
    display: flex;
    padding-top: vh(98);
    justify-content: center;

    .nav_btn {
      display: flex;
      width: vh(97);
      height: vh(30);
      background: rgba(0, 227, 254, 0.2);
      border-radius: vh(4);
      justify-content: center;
      align-items: center;

      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: vh(14);
      color: #FFFFFF;
      cursor: pointer;

      &:first-child {
        margin-right: vh(21);
      }

      &.nav_btn_active {
        border: 1px solid #00E3FE;
        color: #00E3FE;
      }
    }

  }
}
</style>
